<template>
	<view>
		<view class="head">
			<u-icon name="/static/airConditioner/light.png" size="30"></u-icon>风扇全天供应
		</view>
		<view class="airFan">
			<image src="/static/airFan/fan.png" mode="widthFix" :style="'animation-duration: '+animationTime+';animation-play-state:'+status"></image>
			<!-- <image src="/static/airFan/fan.png" mode="widthFix" :style="'transform: rotate('+state+'deg);'"></image> -->
		</view>
		<view class="airFan1">
			<image src="/static/airFan/fan_bottom.png" mode="widthFix" ></image>
		</view>
		<view class="icons">
			<image src="/static/airConditioner/close.png" :class="state==0?'':'image1'" @click="states"></image>
			<view @click="addSum(1)" :class="scorll==1?'image icon':'icon'">
				1
			</view>
			<view @click="addSum(2)" :class="scorll==2?'image icon':'icon'">
				2
			</view>
			<view @click="addSum(3)" :class="scorll==3?'image icon':'icon'">
				3
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				animationTime:'2000ms',
				status: 'paused',
				state: 0,
				airFan: null,
				scorll: 5,
			}
		},
		methods: {
			isInnerAudioContext() {
				wx.playBackgroundAudio({
				  dataUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f260e183-a2a9-4d40-ae13-c8daaf1987da/2264cafd-47eb-44f1-a45e-7d74b7bbdc46.mp3',
				})
			},
			addSum(i){
				switch (i){
					case 1:this.scorll=1;this.animationTime='1000ms';break;
					case 2:this.scorll=2;this.animationTime='550ms';break;
					case 3:this.scorll=3;this.animationTime='300ms';break;
				}
			},
			states() {
				if (this.state == 0) {
						this.state =1
						this.status='running'
						this.isInnerAudioContext()
				} else {
					this.state = 0
					this.status='paused'
					wx.pauseBackgroundAudio()
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.head {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 50rpx;
	}
	.airFan {
		width: 100%;
		display: flex;
		justify-content: center;
		
		image {
			width: 60%;
			 animation-name: myfirst; /*动画的名称 */
			// animation-duration: 2000ms; /*动画从开始到结束的时间*/
			animation-timing-function: linear; /*动画执行快慢的参数*/
			animation-iteration-count: infinite; 
		}
	}
	@keyframes myfirst {
	  /*开始转的角度*/
	  from {
	    transform: rotate(0deg);
	  }/*结束的角度*/
	  to {
	    transform: rotate(360deg);
	  }
	}
.airFan1 {
	position: absolute;
		width: 100%;
		top: 310rpx;
		z-index: -1;
		display: flex;
		justify-content: center;
		image {
			width: 45%;
		}
	}
	.icons {
		position: fixed;
		bottom: 88rpx;
		width: 100%;
		display: flex;
		justify-content: space-around;
		padding: 20rpx;
		box-sizing: border-box;
		image {
			background-color: #bcbcbc;
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			padding: 40rpx;
			box-sizing: border-box;
		}
		.image1 {
			background-color: red;
		}
		.icon {
			width: 150rpx;
			height: 150rpx;
			line-height: 150rpx;
			border-radius: 50%;
			background-color: #bcbcbc;
			color: #fff;
			font-size: 80rpx;
			text-align: center;
		}
		.image {
			background-color: #60c8ff;
		}
		.icon:active{
			background-color: #515151;
		}
	}
</style>
